<!--
 * @Description: 
 * @Author: Zlou
 * @Date: 2021-06-24 21:14:14
 * @LastEditors: Zlou
 * @LastEditTime: 2021-06-28 09:24:19
-->
<template>

<!-- 员工账单管理 -->
<div class="EmployeeAccount-List">
  <div class="search">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <!-- 日期时间选择器 -->
      <el-form-item>
        <el-date-picker
        v-model="searchForm.Time" 
        value-format="timestamp"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini">
        </el-date-picker>
      </el-form-item>
      <!-- 交易类型： 提现/收益 -->
      <el-form-item>
        <el-select size="mini" v-model="searchForm.type" clearable placeholder="交易类型">
          <el-option label="提现" value="提现"></el-option>
          <el-option label="收益" value="收益"></el-option>
        </el-select>
      </el-form-item>
      <!-- 交易状态：正常/未审核 -->
      <el-form-item>
        <el-select size="mini" v-model="searchForm.status" clearable placeholder="交易状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>
      <!-- 员工编号 -->
      <el-form-item>
        <el-select size="mini" v-model="searchForm.userId" clearable placeholder="员工编号">
          <el-option v-for="item in categoryData" :key="item.id" :label="item.userId" :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
      <!-- 查询按钮 -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
      </el-form-item>    
    </el-form>
  </div>
  <!-- 表格 -->
  <div > 
    <el-table size="mini" v-loading="loading" :data="tableData" stripe style="width: 100%" >
      <el-table-column prop="userId" align="center" label="员工编号"></el-table-column>
      <el-table-column prop="transferMoney" align="center" label="交易金额"></el-table-column>
      <el-table-column prop="transferTime" align="center" label="交易时间">
        <template slot-scope="scope">
          {{moment(scope.row.transferTime).format("YYYY-MM-DD HH:mm:ss")}}
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="交易类型"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==='正常'?'success':'danger'">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" align="center" label="描述"></el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="pagination-div" >
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</div>
</template>

<script>
import { pageQueryEmployeeAccount } from '@/api/account';
import moment from 'moment';
export default {
  data() {
    return {
      // 日期选择器
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 员工编号的数据
      categoryData: [],
      // 交易类型，交易状态的数据
      searchForm: {
        type: '' ,
        status: '' ,
        userId: '',
      },
      // 表格展示的数据
      tableData: [],
      // 分页参数
      params: {
        page: 1,
        pageSize: 10,
      },
      // 分页总条数
      total: 0,
      // 加载
      loading: false,
    };
  },
  // 分页深度监听
  watch: {
    params: {
      handler(){
        this.queryData();
      },
      deep: true,
    }
  },
  computed: {},
  methods: {
    moment,
    async queryCategoryData(){
      let res = await pageQueryEmployeeAccount({page: 1, pageSize: 100});
      //   获取员工编号的数据
      this.categoryData = res.data.list;
    },
    // 获取员工表单的数据
    async queryData(){
      this.loading = true ;
      // 处理数据
      let temp = {
        ...this.params,
        ...this.searchForm,
      }
      // 遍历对象
      for (let key in temp){
        if(!temp[key]){
          delete temp[key];
        }
      }
      if(temp.Time) {
          temp.beginTime = temp.Time[0];
          temp.endTime = temp.Time[1];
          delete temp.Time;
      }
      console.log(temp);
      // 发送请求
      let res = await pageQueryEmployeeAccount(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
      // 加载完毕
      this.loading = false;
    },
    // 查询按钮点击事件处理程序
    toSearch() {
        this.queryData();
    },
    // 每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params = {
          page: 1,
          pageSize: val,
        };
    },
    // 当前页码发生变化时的时的事件处理程序
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val ;
    }
  },
  created() {
    this.queryCategoryData();
    this.queryData();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped >
.search{
    display: flex;
    height: 50px;
}
</style>